<template>
	<view class="content">
		<view><wyb-drop-down ref="dropDown" :options="options"></wyb-drop-down></view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="openLoupanDetails">
				
				<view class="item-image"> <image :src="item.thumb" mode="widthFill"></image>  </view>
				<view>
					<view class="item-title">{{item.name}}</view>
					<view class="item-content">{{item.model.name}}/{{item.style.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';

export default {
	data() {
		return {
			options: [
				{
					header: '区域',
					contents: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区', '浏阳市', '宁乡市', '长沙县']
				},
				{
					header: '风格',
					contents: ['恬淡田园风格', '新中式风格装修', '现代简约风格', '欧式古典风格', '地中海风格', '东南亚风格']
				},
				{
					header: '户型',
					contents: ['115m²', '120m²', '135m²', '140m²']
				}
			],
			list:[]
		};
	},
	components: {
		wybDropDown
	},
	methods: {
		openLoupanDetails(){
			uni.navigateTo({
				url:"/pages/detailss3/detailss3"
			})
		}
	},
	onLoad() {
		uni.request({
			url: 'https://baiyi.kent.work/api/v1/system/getBuildList',
			method: 'POST',
			data: { "page": 1, //页码
                    "limit": 10, //分页偏移量（即每页多少条数据）
                    "style": 0, //风格
                    "area": 0, //区域
                    "model": 0 ,//户型
                  },
			success: res => {
				this.list=res.data.data.list
			},
			fail: () => {},
			complete: () => {}
		});
	}
};
</script>

<style lang="less" scoped>
.content {
	padding-top: 96rpx;

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 22rpx;
		padding: 22rpx;

		.item {
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

			.item-image {
				width: 100%;

				image {
					border-radius: 12rpx 12rpx 0 0;
					display: block;
					width: 100%;
				}
			}
			.item-title {
				font-size: 24rpx;
				margin-top: 16rpx;
				margin-left: 20rpx;
			}
			.item-content {
				font-size: 20rpx;
				color: #666666;
				margin-left: 20rpx;
				margin-bottom: 12rpx;
			}
		}
	}
}
/deep/ .wyb-drop-down-content-item-label[data-v-364e156c] {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 23px;
	color: green;
}
</style>
